<template>
    <div>
        <van-nav-bar
            @click-left="handleClickLeft"
            @click-right="handleClickRight"
        >
            <template #left>
                <van-icon name="bars" size="18"/>
            </template>
            <template #right>
                <van-icon v-if="props.localShowTitle===0" name="search" size="18" />
                <van-icon v-if="props.localShowTitle===1" name="share-o" size="18"/>
            </template>
            <template #title >
                <van-tabs v-if="props.localShowTitle===0" v-model:active="localActive" style="font-size: 16px" @click-tab="handleActive">
                    <van-tab  title="关注" name="0"></van-tab>
                    <van-tab  title="发现" name="1"></van-tab>
                    <van-tab  title="附近" name="2"></van-tab>
                </van-tabs>
                <van-button v-if="props.localShowTitle===1">123</van-button>
            </template>
        </van-nav-bar>

        <van-popup
            v-model:show="localShowLeft"
            position="left"
            :style="{ width: '70%', height: '100%' }"
            @click-overlay="handleClickOverLay"
            :close-on-click-overlay="localOverlay"
        />

    </div>
</template>

<script setup>
import { ref,watch } from 'vue';
import {showToast} from "vant";


const props = defineProps({
    showLeft: Boolean,
    showOverlay: Boolean,
    active: {
        type: String,
        default: '1'
    },
    localShowTitle: {
        type: Number,
        default: 0
    }
});

const emit = defineEmits(['update:showLeft','update:localOverlay','update:localActive']);
const localShowLeft = ref(props.showLeft);
const localOverlay = ref(false);
const localActive = ref('1');


// 监听父组件传递的 prop 变化
watch(() => [props.showLeft,props.showOverlay,props.active], () => {
    localShowLeft.value = props.showLeft;
    localOverlay.value = props.showOverlay;
    localActive.value = props.active
});

const handleClickLeft = () => {
    emit('update:showLeft', true);
};
const handleClickOverLay =()=>{
    emit('update:localOverlay',true)
}

const handleClickRight=()=>{
    if (props.localShowTitle === 0) {
        showToast('首页搜索')
    }
    if (props.localShowTitle === 1) {
        showToast('我的页面分享')
    }
}
const handleActive=(index)=>{
    emit('update:localActive',index.name)
}
</script>

<style>
.van-nav-bar .van-icon {
    color: #000000
}
.van-tab--active {
  font-weight: var(--van-font-bold);
}

.van-nav-bar__title {
  max-width: 60%;
  margin: 0 auto;
  font-size: var(--van-nav-bar-title-font-size);
}

.van-tab {

    padding: 0 8px;
}

.van-tabs__line{
    background-color: #ff0000;
    width: 25px;
}
</style>